<template>
  <div class="button">
    <slot  name="pre">
      <el-button type="primary" @click="pre" :disabled="active == 1">上一步</el-button>
    </slot>
    <slot  name="next">
      <el-button type="primary" @click="next" :disabled="!flag">下一步</el-button>
    </slot>
  </div>
</template>

<script lang="ts" setup>
import { inject, ref } from 'vue';

defineProps<{
  flag:boolean
}>()

// const emit = defineEmits(['on-click'])

const active = inject('active' ,ref(1))
const pre = () => {
  active.value < 1 ? 1 : active.value--
}

const next = () => {
  active.value == 4 ? 4 : active.value ++
  // emit('on-click')
}


</script>

<style lang="less" scoped>
.button{
  text-align: center;
  padding-bottom: 20px;
}
</style>
